<template>
    <view>
        <view class="hb-bar bg-white solid-bottom">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                头像形状
            </view>
        </view>
        <view class="padding bg-white">
            <view class="hb-avatar round" style="background-image:url(https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg)"></view>
            <view class="hb-avatar radius margin-left" style="background-image:url(https://img.18183.com/uploads/allimg/190924/266-1Z924120G1.jpg);"></view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                头像尺寸
            </view>
        </view>
        <view class="padding bg-white">
            <view class="hb-avatar round sm" style="background-image:url(https://img.18183.com/uploads/allimg/191031/266-191031164046.jpg)"></view>
            <view class="hb-avatar round margin-left" style="background-image:url(https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg);"></view>
            <view class="hb-avatar round lg margin-left" style="background-image:url(https://img.18183.com/uploads/allimg/190219/237-1Z21Z94014954.png);"></view>
            <view class="hb-avatar round xl margin-left" style="background-image:url(https://img.18183.com/uploads/allimg/181229/237-1Q2291H404N0.jpg);"></view>
			<view class="hb-avatar round xxl margin-left" style="background-image:url(https://img.18183.com/uploads/allimg/181229/237-1Q2291H404N0.jpg);"></view>
        </view>
        <view class="padding bg-white">
            <view class="hb-avatar round sm bg-red">A</view>
            <view class="hb-avatar round bg-red margin-left ">B</view>
            <view class="hb-avatar round lg bg-red margin-left">C</view>
            <view class="hb-avatar round xl bg-red margin-left">D</view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                头像文字图标
            </view>
        </view>
        <view class="padding bg-white">
            <view class="hb-avatar round lg "><text>瀚</text></view>
            <view class="hb-avatar round lg margin-left"><text class="hb-icon_ziyuan"></text></view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                头像组
            </view>
        </view>
        <view class="padding bg-white">
            <view class="hb-avatar_group">
                <view class="hb-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
            </view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                头像标签
            </view>
        </view>
        <view class="padding bg-white">
            <view class="hb-avatar round lg margin-left" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]">
                <view class="hb-tag badge"><text>99+</text></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                avatar: [
                    'https://img.18183.com/uploads/allimg/191031/266-191031164046.jpg',
                    'https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg',
                    'https://img.18183.com/uploads/allimg/190219/237-1Z21Z94014954.png',
                    'https://img.18183.com/uploads/allimg/181229/237-1Q2291H404N0.jpg'
                ],
            }
        }
    }
</script>

<style>
</style>
